<template>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		<view class="htz-signature-body">
			<canvas :canvas-id="cid" :id="cid" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
				disable-scroll></canvas>
			<view class="htz-signature-fixed-bottom">
				<view class="htz-signature-fixed-bottom-item htz-signature-tools">
					<view class="htz-signature-tools-item" @click="clear">
						<!-- <image src="../../static/htz-signature/qingkong_1.png"></image> -->
						<view>清空</view>
					</view>
				</view>
				<view class="htz-signature-fixed-bottom-item sumbit" @click="sumbit">提交</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		pathToBase64
	} from 'image-tools'
	// import {
	// 	pathToBase64
	// } from "./index.js"
	export default {
		name: 'htz-signature',
		props: {
			cid: {
				type: String,
				default: '',
			},
			type: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				id: '',
				Strokes: [],
				dom: null,
				width: 0,
				height: 0,
				colorShow: false,
				colorIndex: 0,
				colorData: [{
					name: 'black',
					value: '#000000'
				}, {
					name: 'red',
					value: '#f34336',
				}, {
					name: 'blue',
					value: '#0238d0',
				}, {
					name: 'green',
					value: '#8bc24b',
				}, {
					name: 'yellow',
					value: '#ffeb3c',
				}, {
					name: 'purple',
					value: '#a603d0',
				}, {
					name: 'grey',
					value: '#a5a5a5',
				}],
				lineWidthShow: false,
				lineWidthIndex: 2,
				lineWidthData: ['3', '6', '9', '12', '15', '18'],
				tempFilePath: ''
			}
		},
		mounted() {
			this.$nextTick(function() {
				// #ifdef H5
				document.body.addEventListener('touchmove', this.touchmoveEnd, {
					passive: false
				})
				// #endif

				uni.getSystemInfo({
					success: (res) => {
						this.width = res.windowWidth;
						this.height = res.windowHeight;
					}
				});

				this.dom = uni.createCanvasContext(this.cid, this);

			});
		},
		beforeDestroy() {
			// #ifdef H5
			document.body.removeEventListener('touchmove', this.touchmoveEnd, {
				passive: false
			})
			// #endif
		},
		methods: {
			open() {
				this.$refs.popup.open("bottom")
			},
			touchmoveEnd(e) {
				e.preventDefault();
				e.stopPropagation();
			},
			sumbit() {
				var _this = this
				uni.canvasToTempFilePath({
					canvasId: this.cid,
					success: (res) => {
						//h5页面直接返回base64图片
						// #ifdef H5
						const signBaseArr = res.tempFilePath.split(",")
						const signBaseStr = signBaseArr[1]
						// console.log("h5==", signBaseStr)
						//写入缓存中
						localStorage.setItem("sign-"+this.type,"data:image/png;base64,"+signBaseStr)
						// #endif
						//app端返回的是一个uniapp的临时路径，需要传换成base64的图片
						//#ifdef APP-PLUS			
						this.tempFilePath = res.tempFilePath
						var signBaseArr
						pathToBase64(res.tempFilePath)
							.then(base64 => {
								signBaseArr = base64.split(",")
								var signBaseStr = signBaseArr[1];
								signBaseStr = signBaseStr.replace(/[\r\n]/g, "").replace(/(^\s*)|(\s*$)/g,
									"");
								// this.$emit('sumbit', signBaseStr)
								// console.log("app==", signBaseStr)
								if(signBaseStr == '')
								{
									this.$toast("签名不能为空")
									return false
								}
								localStorage.setItem("sign-"+this.type,"data:image/png;base64,"+signBaseStr)
							})
						//#endif
						this.$toast("签名成功")
						
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					},
					fail: (err) => {
						this.$emit('fail', err)
					}
				}, this)
			},
			clear() { //清空
				this.Strokes = [];
				this.dom.clearRect(0, 0, this.width, this.height)
				this.dom.draw();
			},
			drawCanves() {
				this.Strokes.forEach((item, index) => {
					let StrokesItem = item;
					if (StrokesItem.points.length > 1) {
						this.dom.beginPath();
						this.dom.setLineCap('round');
						this.dom.setStrokeStyle(item.style.color);
						this.dom.setLineWidth(item.style.lineWidth);
						StrokesItem.points.forEach((sitem, sindex) => {
							if (sitem.type == "touchstart") {
								this.dom.moveTo(sitem.x, sitem.y)
							} else {
								this.dom.lineTo(sitem.x, sitem.y)
							}
							//console.log('dom', sitem)
						})
						this.dom.stroke();

					}
				})
				this.dom.draw();
			},
			touchstart(e) {
				this.Strokes.push({
					imageData: null,
					style: {
						// color: this.colorData[this.colorIndex].value,
						// lineWidth: this.lineWidthData[this.lineWidthIndex],
						color: "#000",
						lineWidth: 8,
					},
					points: [{
						x: e.touches[0].x,
						y: e.touches[0].y,
						type: e.type,
					}]
				})
				this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
			},
			touchmove(e) {
				this.Strokes[this.Strokes.length - 1].points.push({
					x: e.touches[0].x,
					y: e.touches[0].y,
					type: e.type,
				})
				this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
			},
			touchend(e) {
				if (this.Strokes[this.Strokes.length - 1].points.length < 2) { //当此路径只有一个点的时候
					this.Strokes.pop();
				}
				//this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
				// uni.canvasGetImageData({
				// 	canvasId: this.cid,
				// 	x: 0,
				// 	y: 0,
				// 	width: this.width,
				// 	height: this.height,
				// 	success: (res) => {
				// 		 console.log(res.width) // 100
				// 		// console.log(res.height) // 100
				// 		// console.log(res.data instanceof Uint8ClampedArray) // true
				// 		// console.log(res.data.length) // 100 * 100 * 4
				// 		this.Strokes[this.Strokes.length - 1].imageData = res;
				// 	}
				// },this)
				//this.drawCanves();
			},
			drawLine(StrokesItem, type) {
				if (StrokesItem.points.length > 1) {
					this.dom.beginPath();
					this.dom.setLineCap('round')
					this.dom.setStrokeStyle(StrokesItem.style.color);
					this.dom.setLineWidth(StrokesItem.style.lineWidth);
					this.dom.moveTo(StrokesItem.points[StrokesItem.points.length - 2].x, StrokesItem.points[StrokesItem
						.points.length -
						2].y);
					this.dom.lineTo(StrokesItem.points[StrokesItem.points.length - 1].x, StrokesItem.points[StrokesItem
						.points.length -
						1].y);
					this.dom.stroke();
					this.dom.draw(true);
				}
			}
		}
	}
</script>

<style>
	.htz-signature-body {
		/* position: fixed; */
		/* top: 0; */
		/* bottom: 120rpx; */
		/* left: 0; */
		width: 100%;
		background-color: #fff;
		height: 100vw;
	}

	.htz-signature-body canvas {
		width: 100%;
		height: 100%;
	}

	.htz-signature-fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #000;
		z-index: 11;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		background-color: #fff;
	}

	.htz-signature-fixed-bottom .htz-signature-fixed-bottom-item {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		border-top: 1px solid #1890ff;
		color: #1890ff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.htz-signature-fixed-bottom view.sumbit {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		background-color: #1890ff;
		color: #fff;
	}

	.htz-signature-tools {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.htz-signature-tools-item {
		text-align: center;
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		line-height: 35rpx;

	}


	.htz-signature-color-main {
		position: fixed;
		bottom: 120rpx;
		left: 0;
		width: 710rpx;
		/* height: 75rpx; */
		z-index: 11;
		padding: 25rpx 20rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-top: 1px dashed #d9d9d9;
		transition: display 2s;
		-moz-transition: display 2s;
		/* Firefox 4 */
		-webkit-transition: display 2s;
		/* Safari 和 Chrome */
		-o-transition: display 2s;
	}

	.htz-signature-color-item {
		width: 80rpx;
		height: 80rpx;
		background-color: #000000;
		border-radius: 100px;
		margin: 5px;
		position: relative;
	}

	.htz-signature-lineWidth-item {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 100px;
		margin: 5px;
		position: relative;
	}

	.htz-signature-lineWidth-item.on {
		border: 1px solid #d4a39e;
	}

	.htz-signature-color-item .htz-signature-color-item-icon {
		display: none;
	}

	.htz-signature-color-item.on .htz-signature-color-item-icon {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50rpx;
		height: 50rpx;
		margin-top: -25rpx;
		margin-left: -25rpx;
	}

	.black {
		background-color: #000000 !important;
	}
</style>